@import "./tree.component.custom";

.tree-level {
  display: flex;
  flex-flow: row nowrap;
  overflow: hidden;
}
.tree-row {
  display: flex;
  flex-flow: row nowrap;
  max-width: 100%;
}
.tree-column, .tree-node {
  display: flex;
  flex: 1 1 100px;
  flex-flow: column nowrap;
  overflow: hidden;
}
.tree-column {
}
.tree-node-arrows {
  color: #888;
  display: flex;
  flex: none;
  flex-flow: row nowrap;
}
.tree-node-arrow {
  align-items: center;
  display: flex;
  flex: 1 1 100px;
  justify-content: center;
  text-align: center;
}
.tree-node-body {
  background: #eee;
  border: 1px solid #ddd;
  border-radius: 5px;
  flex: auto;
  overflow: hidden;
  padding: 0.5em 1em;
  text-align: center;
  word-wrap: break-word;
}

.tree-node-body.btn-primary {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.tree-outer {
  display: flex;
  flex-flow: column nowrap;
  &:not(.horizontal) {
    .tree-node-arrows {
      padding: 5px 0;
    }
    .tree-node-arrow + .tree-node-arrow {
      margin-left: 1em;
    }
    .tree-column + .tree-column {
      margin-left: 1em;
    }
    .tree-node + .tree-node {
      margin-left: 1em;
    }
    .arrow-horizontal {
      display: none;
    }
  }
  &.horizontal {
    flex-flow: row nowrap;
    .tree-node-arrows {
      padding: 0 5px;
    }
    .tree-node-body {
      max-width: 250px;
    }
    .tree-column, .tree-node {
      flex-flow: row nowrap;
    }
    .tree-level, .tree-row, .tree-node-arrows {
      flex-flow: column nowrap;
    }
    .arrow-vertical {
      display: none;
    }
  }
}
